<template>
  <div class="jingxi">
    <div class="head">
      <img src="../assets/jingxi_1.jpg" />
    </div>
    <div class="main">
      <div class="title">
        <ul>
          <li
            v-for="(name, index) in sorts"
            :key="name"
            @click="currentIndex = index"
          >
            {{ name }}
          </li>
        </ul>
      </div>
      <div class="wares">
        <ware-view v-for="item in wares" :key="item.img">
          <div slot="left">
            <img :src="item.img" />
          </div>
          <div slot="right">
            <span id="span_1">{{ item.name }}</span>
            <span id="span_2">¥{{ item.price }}</span>
          </div>
        </ware-view>
      </div>
    </div>
  </div>
</template>
<script>
import wareView from "../components/ware.vue";
export default {
  data() {
    return {
      sorts: ["精选", "防疫医疗", "京喜自营"],
      wares: [
        {
          img: require("../assets/goods_1.png"),
          name: "清扬(CLEAR)洗发露 控油平衡型(去屑+控油)500g洗发水 (氨基酸洗发)",
          price: "47.90",
        },
        {
          img: require("../assets/goods_2.png"),
          name: "紫光园 麻酱烧饼 火烧芝麻酱烧饼 清真食品早餐空气炸锅食材 北京特产 麻酱烧饼280g*2袋（8个）",
          price: "36.80",
        },
        {
          img: require("../assets/goods_3.png"),
          name: "初屋 餐桌 实木岩板餐桌现代简约家用小户型大理石餐桌椅组合可伸缩折叠圆桌圆形吃饭桌子 1.35米黑白色【12MM雪山白岩板】 单餐桌",
          price: "1380.00",
        },
        {
          img: require("../assets/goods_4.png"),
          name: "骏德 衣柜推拉门 简易木质小衣柜衣橱简约现代推拉门衣柜 木 浅胡桃色 A款长80cm宽45cm高180cm",
          price: "238.00",
        },
        {
          img: require("../assets/goods_5.png"),
          name: "德运 (Devondale) 澳大利亚原装进口 全脂成人奶粉1kg袋装 调制乳奶粉 学生青少年中老年奶粉",
          price: "61.00",
        },
        {
          img: require("../assets/goods_6.png"),
          name: "御泥坊套装 美白嫩肤补水护肤品套装化妆品水乳女送礼 洗面奶水乳液睡膜面膜眼膜贴素颜霜",
          price: "269.90",
        },
      ],
      currentIndex: 0,
    };
  },
  components: {
    wareView,
  },
};
</script>
<style>
.jingxi .head img {
  width: 320px;
}
.jingxi .main {
  background-color: rgb(246, 246, 246);
}
.jingxi .main .title {
  width: 100%;
  height: 50px;
  background: #fafafa;
  position: relative;
  margin-top: -15px;
  border-radius: 8px 8px 0px 0px;
}
.jingxi .main .title ul {
  display: flex;
  align-items: flex-end;
  height: 45px;
  justify-content: space-evenly;
}
.jingxi .main .title li {
  display: inline-flex;
  justify-content: center;
  width: 80px;
}
.jingxi .wares .right div {
  height: 112px;
}
.jingxi .wares .right #span_1 {
  font-size: 13px;
  height: 50px;
  overflow: hidden;
}
.jingxi .wares .right #span_2 {
  position: relative;
  float: right;
  margin-right: 10px;
}
.jingxi .wares {
  height: 780px;
}
</style>